import Taro, { Component } from '@tarojs/taro'
import { Swiper, SwiperItem, Image, View, Text ,Button,Video } from '@tarojs/components'
import '../../assets/common.scss'
import CommonJs from '../../utils/common'
import './grouplist.scss'

import ban03 from '../../assets/kedouimg01/ban03.png'
import searchimg from '../../assets/kedouimg01/search1.png'
import xl from '../../assets/kedouimg01/xl.png'
import back from '../../assets/kedouimg01/back.png'

import QQMapWX from '../../utils/qqmap-wx-jssdk'

export default class Index extends Component {
  constructor(props) {
    super(props); 
    this.state = {
      reslut: [],
      znwns:'',
		  pageNumber:0,
		  hasNextPage:false,
	  	scrollPd:false,
      updatete: true,
      mytime: null,
      gglist:[],
      qid:"",
      catlist:[],
      catid:0,
      videosrc:'',
      citylist:[],
      cityid:'',
      dwname:'',
      cityname:'',
      isIphoneX:0,
      appmark:CommonJs.getmark(),
    }
  }  
  config = {
    navigationBarTitleText:'数字化门店',
    "navigationStyle":"custom"
  }
 
  componentWillMount () {
  	var params=this.$router.params;
  	
  	const app = Taro.getApp();
  	let isIphoneX = app.globalData.isIphoneX;
  	if(params.cityname){
  		this.setState({
	      cityname:params.cityname,
	      dwname:params.cityname,
	      isIphoneX:isIphoneX
	    })
  		this.getcat();
  	}
  	else{
		
		var webinfo=Taro.getStorageSync('webinfo')
		if(webinfo){//&&this.$router.params.byfrom!='gxc'
			this.getmyshop();
		}
		else{
  			this.getmap();
		}
  		 this.setState({
	      isIphoneX:isIphoneX
	    })
  	}
    
   
  }
  componentDidShow () {
  	
  }
  componentDidUpdate () {

  }
  getmyshop(){
	var webinfo=Taro.getStorageSync('webinfo')
	var url='/crm/papi/v1.9/consultant/query/shopAdvert?dealerId='+webinfo.dealerId+'&typeId=1&size=1000'; 
    var _this=this;
  	CommonJs.ajaxRequest(url,'','GET',function(res){
       
        _this.setState({
          reslut:res.data.list,
		      dwname:'附近门店'
        })

    },'wfw')
  }
  open(url,type){
    this.$preload({
      type:type
    })
    CommonJs.open(url);
  }
  
  opento(curl,id,sid,did){

    Taro.setStorage({key:'shopId',data:sid})
		Taro.setStorage({key:'dealerId',data:did})
		var url='/clusterShop/getClusterShopByShopId?shopId='+sid
  		var _this=this;
		CommonJs.ajaxRequest(url,'','GET',function(res){
			var dateinfo = Taro.getStorageSync('dateinfo')
			if(!dateinfo){
				dateinfo={}
			}
			var qid=''
			if(res.content){
				if(res.content.clusterId){
					qid=res.content.clusterId
				}
			}
			dateinfo.qid=qid
			Taro.setStorage({key:'dateinfo',data:dateinfo})
		  if(_this.$router.params.byfrom=='gxc'&&_this.state.appmark=='xjzb'){
				_this.$preload({
		      type:id,
		      malltype:'UC'
		   }) 
			}
			else{
	  		_this.$preload({
		      type:id
		    })
	  	}
	    CommonJs.openTo(curl);
		}) 
  }
  getmap(){
  	
  	var _this=this;
  	let qqmapsdk = new QQMapWX({
      key: 'DR3BZ-QBJ36-2NMSD-EZ4GP-AQ4KV-KDBP4'
    })
  	Taro.getLocation({
			type: 'wgs84',
			success: function (res) {
			  const latitude = res.latitude
			  const longitude = res.longitude
				qqmapsdk.reverseGeocoder({
		     location: {
		       latitude:latitude,
		       longitude:longitude
		     },
		     success: function (res) {
		     	//console.log(JSON.stringify(res))
		     	_this.setState({
		        dwname:res.result.address_reference.town.title,
		        cityname:res.result.address_component.city
		      })
		      _this.getcat();
		     },
		
		     fail: function (res) {
		     	
		     	 _this.getcat();
		     },
		
		     complete: function (completeres) {
		
		     }
		  });
			},
			fail:function(){
				_this.getcat();
			}
		})
  }
  getcat(){
  	var url='/store/getTradeListByParentId'; 
    var _this=this;
  	CommonJs.ajaxRequest(url,'','GET',function(res){
        _this.getdatebycat(0,0)
        _this.setState({
          catlist:res,
          catid:0
        })

    })
  }

  
  getdatebycat(id,pageNumber){
    var _this=this
    var dates={
      size:10,
      page:pageNumber
    }
    if(id==0){
      var url='/crm/papi/v1.9/consultant/query/shopAdvert?city='+this.state.cityname
    }
    else{
    	var url='/crm/papi/v1.9/consultant/query/shopAdvert?tradeId='+id+"&city="+this.state.cityname
    }
    
    if(_this.$router.params.byfrom=='gxc'&&this.state.appmark=='xjzb'){
    	url=url+'&typeId=2'
    }
    else{
    	url=url+'&typeId=1'
    }
    CommonJs.ajaxRequest(url,dates,'GET',function(res){
      if (res) {

        if(res.data.totalPages>pageNumber){
        var hasNextPage = true;
      }
        else{
          var hasNextPage = false;
        }
      var reslut = res.data.list
      var resluts = _this.state.reslut
      for(var i = 0; i < reslut.length; i++){
        resluts.push(reslut[i]);
      }
      if (hasNextPage) {
      _this.setState({
        reslut: resluts,
        znwns: '暂无数据',
        pageNumber: res.data.page,
        hasNextPage: hasNextPage,
        catid:id,
        scrollPd: true
      })
      }
      else {
      _this.setState({
        reslut: resluts,
        znwns: '暂无数据',
        pageNumber: res.data.page,
        hasNextPage: hasNextPage,
        catid:id,
        scrollPd: false
      })
      }
    } else {
      _this.setState({
      znwns: '暂无数据'
      })
    }
    },"wfw")
    // console.log(_this.state.reslut);
  }
  loadMore(){
    var _this = this
    var pd = _this.state.scrollPd
    if(pd) {
      //防止多次触发滑动到底部事件
      _this.setState({
      scrollPd: false//禁止下拉
      })
      var pageNumber = _this.state.pageNumber + 1
      _this.getdatebycat(_this.state.cityid,pageNumber)
      console.log(pd);
    }else{
      var hasNextPage =  _this.state.hasNextPage
      if(hasNextPage){
      Taro.showToast({
        title:'正在加载数据...',
        icon: 'none',
        duration: 2000
      })
      }else{
      Taro.showToast({
        title:'没有更多数据啦！',
        icon: 'none',
        duration: 2000
      })
      }
      console.log(hasNextPage);
    }
    }
  getnav(id,did, types,name){
    var _this = this;
    
    Taro.setStorage({key:'shopId',data:id})
	Taro.setStorage({key:'dealerId',data:did})
//	var webinfo=Taro.getStorageSync('webinfo')
//	if(webinfo&&_this.$router.params.byfrom!='gxc'){
//		CommonJs.open('/pages/xijia/grouplist?byfrom=fjshop&shopname='+name);
//	}
//  else{
		var url='/clusterShop/getClusterShopByShopId?shopId='+id
  		var _this=this;
		CommonJs.ajaxRequest(url,'','GET',function(res){
			var dateinfo = Taro.getStorageSync('dateinfo')
			if(!dateinfo){
				dateinfo={}
			}
			var qid=''
			if(res.content){
				if(res.content.clusterId){
					qid=res.content.clusterId
				}
			}
			dateinfo.qid=qid
			Taro.setStorage({key:'dateinfo',data:dateinfo})
		  if(_this.$router.params.byfrom=='gxc'){
				_this.opendetails('/pages/mall/ucindex?byfrom=gxc')
			}
			else{
		  	_this.opendetails('/pages/mall/shopindex')
		  }
		})
	//}
  }
  
  getdatebycity(cityid){
  	this.setState({
	    cityid: cityid
	  })
  	this.getdatebycat(this.state.catid,this.state.pageNumber)
  }
  getdatenav(id){
  	this.setState({
      cityid: id,
      reslut:[],
      pageNumber:0
	  })
  	var webinfo=Taro.getStorageSync('webinfo')
  	if(!webinfo){
  		this.getdatebycat(id,0)
  	}
  }
  gotocity(url){
	var webinfo=Taro.getStorageSync('webinfo')
	if(!webinfo){
		if(this.$router.params.byfrom=='gxc'){
			url=url+"?byfrom=gxc"
		}
		CommonJs.openTo(url);
	}
	
  }
  opendetails(url){
    CommonJs.openTo(url);
  }
  goDetail(url) {
	   //var url='/plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id='+roomid;
	   CommonJs.openTo(url);
	}
  render () {
    const resy = this.state.reslut
    const gglist= this.state.gglist;
    const catlist=this.state.catlist
    const citylist=this.state.citylist
    return (
    	<View className='page'>
        <ScrollView className='qun-mingxibo' scrollY='true' onScrollToLower={this.loadMore.bind(this,'')}>
	      <View className='qun-banner'> 
	      	<View className='shop-sx'> 
						<View className='dlheader' style={this.state.isIphoneX==1?'top:28px':''}>
							<View className='back' onClick={this.open.bind(this,'/pages/xijia/grouplist')}><Image className='backimg' mode='widthFix' src={back}></Image></View>
							<View className='dlh3' onClick={this.gotocity.bind(this,'/pages/map/citylist')}>
								{this.state.dwname}
								<Image className='xl' mode='widthFix' src={xl}></Image>
							</View>
						</View>
	          <View className='bdk-cat'  style={this.state.isIphoneX==1?'padding-top:48px;border:0;margin-top:140rpx;':'border:0;margin-top:140rpx;'}>
	          	<Text className={0==this.state.catid?'bdkcat-li bdkcat-lic':'bdkcat-li'}  onClick={this.getdatenav.bind(this,0)}>全部</Text>
	            {catlist.map((item, index) => (
	              <Text className={item.id==this.state.catid?'bdkcat-li bdkcat-lic':'bdkcat-li'}  onClick={this.getdatenav.bind(this,item.id)}>{item.name}</Text>
	             ))}
	          </View>
	        </View>

          
          <View className='qun-licon bdk-list' style={resy.length>0?'background-color:#fff;':'display:none'}>
            {resy.map((item, index) => (
            <View className='qun-lists' style='margin:2rpx 0 0 0'>
              <View className='qun-toxnli' onClick={this.getnav.bind(this,item.id,item.dealerId,1,item.name)}>
                <View className='qun-lfimg'>
                  <Image className='qun-userg' mode='aspectFill' src={item.rotationPictures ? item.rotationPictures : 'https://minichat.g2ma.com/kedouimg/xjlogo.png'}></Image>
                </View>
                <Text className='fss' style='display:none'>{item.clusterCount}人关注</Text>
                <View className='qun-lfinfo' style="width:88%">
                  <View className='qun-inyi'>
                    <Text className='qun-botn'>{item.name}</Text>
                    <Text className='qun-gntn'>{item.address ? item.address:''}</Text>
                  </View>

                </View>
              </View>
              <View className='bdk-img'>
              	{item.advertList.map((item1, index1) => (
                <View className='bdk-imgs' onClick={this.opento.bind(this,'/pages/mall/goodsxq', item1.id,item.id,item.dealerId)} style={index1 > 2? 'display:none':''}><Image className='shopimg' src={item1.logoUrl}></Image></View>
                ))}
              </View>
            </View>
            ))}
          </View>
          <View className='bdk-list' style={resy.length==0?'background-color:#f1f1f1':'display:none'}>
          	<View className='nodate'>该分类下暂无门店</View>
          </View>

	      </View>
        </ScrollView>
      </View>
    )
  }
}
